<div class="info-item show-on-hover-parent" [id]="'info-item-property-'+prop.key" *ngIf="prop">
    <div class="info-item-header">
        <h6 class="info-item-title">{{prop.display}}:</h6>

        <ng-container *ngIf="prop.value !== undefined">

            <cf-cm-expand *ngIf="prop.renderType === 'code'" class="show-on-hover"
                          [title]="prop.display" [input]="prop.value"
                          [config]="{readonly: true, mode: prop.mode || 'text'}"></cf-cm-expand>

            <cf-copyable [content]="prop.value" [contentType]="prop.mode || 'text'"
                         class="show-on-hover"></cf-copyable>

        </ng-container>
    </div>

    <ng-container *ngIf="prop.value !== undefined; else propLoading">

        <ng-container [ngSwitch]="prop.renderType">

            <ng-container *ngSwitchCase="'badge'">
                        <span class="badge font-weight-normal"
                              [ngClass]="prop.value">{{prop.value}}</span>
            </ng-container>

            <ng-container *ngSwitchCase="'code'">
                <codemirror [input]="prop.value" [config]="{readonly: true, mode: prop.mode}"
                            class="cm-mxh-150"></codemirror>
            </ng-container>

            <ng-container *ngSwitchDefault>
                <div class="word-break-word">{{prop.value}}</div>
            </ng-container>
        </ng-container>
    </ng-container>

    <ng-template #propLoading>
        <div class="animated-background sm"></div>
    </ng-template>

</div>